<%= render "navbar"%>

<div id="index_banner_slide" class="carousel slide index_slide vip_banner" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#index_banner_slide" data-slide-to="0" class="active"></li>
    <li data-target="#index_banner_slide" data-slide-to="1"></li>
    <li data-target="#index_banner_slide" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
    <div class="item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
    <div class="item">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/c077c43b9453c54206f52291141ec0b6e967e295-a2ac05db1dd05c2e7f5afea0425a5d7d8a634146.jpg" alt="vip_banner_img" class="vip_banner_img">
    </div>
  </div>

  <!-- Controls -->
  <a class="left arrow fa fa-angle-left" href="#index_banner_slide" role="button" data-slide="prev"></a>
  <a class="right arrow fa fa-angle-right" href="#index_banner_slide" role="button" data-slide="next"></a>
</div>

<div class="vip_desc container">
  <h2>你还等什么！</h2>
  <p>西瓜会员卡是集宁波各类兴趣课程于一体的消费型会员卡。</p>
  <p>凭此卡可任意购买西瓜校园兴趣版块中的任意课程，每购买一次可凭收到的验证码，到线下店培训一次，直到购买的卡的次数用完。</p>
  <p>不论是情侣约会，还是基友玩耍，在西瓜会员卡里都有你想要的好去处！</p>
  <div class="row">
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/247f851a00cd094e185c8dfa79b73a4211cc7225-6b2425e3f071b9416805928e4a44941e3b93d89a.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">3</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/0d232eb22384012ba3d419ac9ed6dcdeaca12aba-36251efb0a7d5c9d04cf91ca70fa05b08aa88615.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">12</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
    <div class="col-md-4 col-xs-12 card_prize">
      <a href="#"><img src="http://7i7g8l.com1.z0.glb.clouddn.com/167342c90f4650184da159c2082e425ae640f0e6-a32866d64e052c5adf2c8067f91f663efedc0296.png" alt=""></a> 
      <span class="remark">有效时间:<span class="num">180</span>天 &nbsp; 有效次数:<span class="num">无限</span>次</span>
      <a href="#" class="buy">立即购买</a>
    </div>
  </div>
</div>

<div class="vip_class_classify container">
  <h2>课程分类</h2>
  <div class="classify_item">
    <div class="row">
      <div class="col-xs-2">
        <span class="item item_title" style="font-weight:bold;">兴趣课程：</span>
      </div>
      <div class="col-xs-10">
        <span class="item active">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
        <span class="item">摄影</span>
      </div>
    </div>
  </div>
  <!-- <div class="class_sort">
    <span class="item active">最新</span>
    <span class="item">最热</span>
  </div> -->
</div>

<div class="vip_class_container container">
  <div class="row">
  <% 10.times.each do |i| %>
    <div class="col-md-4 col-xs-12 class_item one_time_symbol">
      <img src="http://7i7g8l.com1.z0.glb.clouddn.com/692aba4e48763b27cfa71a579a86a31d20a9b0cf-cdea879f38477d779e1f5cce0535d8b144241804.png" alt="">
      <h3 class="class_title">钢琴</h3>
      <p class="class_addr">地址：宁波市海宁波市海曙曙</p>
      <div class="row">
        <div class="col-xs-5">
          <span class="see_desc"><i class="fa fa-user"></i>&nbsp;<span class="num">100</span>人已浏览</span>
        </div>
        <div class="col-xs-7">
          <a href="#" class="class_buy">购买一次</a>
          <a href="#" class="class_consult">详情</a>
        </div>
      </div>
    </div>
  <% end %>
  </div>
  <div class="vip_pagination">
    <a href="#" class="item">首页</a>
    <a href="#" class="item">上一页</a>
    <a href="#" class="item active">1</a>
    <a href="#" class="item">2</a>
    <a href="#" class="item">下一页</a>
    <a href="#" class="item">尾页</a>
  </div>
</div>
